import './ChildrenItem.scss'
import { useNavigate } from 'react-router-dom'
import { setUserStatus } from '@/store/modules/user';
import { useSelector,useDispatch } from 'react-redux';
import { Button } from 'antd';
import { cacelChildrenAPI } from '@/apis/parent';

export default function ChildrenItem({info,colorBox}){
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user_status } = useSelector(state => state.user);

    const toChildCourse = function(){
        dispatch(setUserStatus({
            ...user_status,
            student_id:info.student_id,
            student_name:info.student_name
        }))
        navigate('/childrencourse');
    }

    const handleUnbind = async () => {
        const res = await cacelChildrenAPI(info.student_id,user_status.token);
        console.log(res);
        window.location.reload();
    }

    return (
        <div className='ChildrenItem'>
            <h1 
                style={{
                    border:`solid 1px ${colorBox.dark}`,
                    color:colorBox.dark
                }}
            >
                {info.student_name}
            </h1>
            <footer>
                <span>{info.student_school}</span>
                {/* <span>{info.diploma}</span> */}
            </footer>
            <div>
            <Button 
                className='into'
                onClick={toChildCourse}
            >
                查看学生详情
            </Button>
            <Button
                danger
                onClick={handleUnbind}
            >
                解除绑定
            </Button>
            </div>
        </div>
    )
}